from .. import navi
from dash import html,dcc
import dash_bootstrap_components as dbc
def backgroud():
    return html.Div([
    navi.navigator(),
    html.Div([
        html.H2('《天道》背景介绍', className='Title',id='backgroud'),
        html.Hr(),
        dbc.Row([
            dbc.Col([
                html.H4('《天道》剧照', className='Movie'),
                dbc.Row([
                html.Img(src='static/images/tiandao1.jpg',
                            className='MovieImg',style={'width':'40%', 'margin':'0px 5%'}),
                html.Img(src='static/images/tiandao2.jpg',
                            className='MovieImg',style={'width':'40%', 'margin':'0px 5%'}),
                ]),
                dbc.Row([
                html.Img(src='static/images/tiandao3.jpg',
                            className='MovieImg',style={'width':'40%', 'margin':'0px 5%'}),
                html.Img(src='static/images/tiandao4.jpg',
                            className='MovieImg',style={'width':'40%', 'margin':'0px 5%'}),
                ]),

            ],style={'width':'100%'}),
            dbc.Col([
            dbc.Col([
                html.H4('剧情简介', className='MovieIntro'),
                html.P('年轻的女警官芮小丹（左小青 饰）通过朋友结识了商界怪才丁元英（王志文 饰），并受托在古城照料丁元英的生活。丁元英异于常人的性格和让人瞠目结舌的才华深深吸引着芮小丹。借由对音乐的共同热爱和制备音箱的契机，芮小丹和丁元英建立了恋爱关系，并结识了几个古城的音乐发烧友。发烧友看中丁元英的奇才，想要利用他的才华帮助自己的农村老家脱贫。而小丹也希望丁元英用自己的智慧在这个极度贫困的农村写一个神话，作为送给她的礼物。丁元英答应了小丹的请求，带领几个发烧友重出江湖，给音响市场带来了巨变的同时，也生动的演绎了所谓天道的“道法自然，如来”。可是他的礼物完成时，那个收礼的人却已不在身边，他也有自己难以出离的天道。', className='MovieText'),
            ],style={'width':'100%'}),
            dbc.Col([
                html.H4('豆瓣评分', className='MovieIntro'),
                html.Div([
                    html.Span('9.2', className='MovieText',style={'margin':'0px 2px','font-size':'30px'}),
                    html.Span('分', className='MovieText',style={'margin':'20px 10px 0px 2px','font-size':'10px'}), ## top right bottom left
                    html.Span('8.7w', className='MovieText',style={'margin':'0px 2px','font-size':'30px'}),
                    html.Span('人评分', className='MovieText',style={'margin':'20px 2px 0px','font-size':'10px'}),
                ], className='MovieStarDiv',style={'margin-top':'10px','width':'90%','display':'flex','justify-content':'left'}),
                html.Div([
                    html.Div([
                        html.Span('5星', className='MovieText',style={'margin':'0px 10px','width':'20%'}),
                        html.Div(className='MovieStar',style={'width':'69.9%','background-color':'#FFD700'}),
                        html.Span('69.9%', className='MovieText',style={'margin':'0px 10px','font-size':'10px'}),
                    ], className='MovieStarDiv',style={'margin-top':'10px','width':'90%','display':'flex','justify-content':'left'}),
                    html.Div([
                        html.Span('4星', className='MovieText',style={'margin':'0px 10px','width':'20%'}),
                        html.Div(className='MovieStar',style={'width':'22.4%','background-color':'#FFD700'}),
                        html.Span('22.4%', className='MovieText',style={'margin':'0px 10px','font-size':'10px'}),
                    ], className='MovieStarDiv',style={'margin-top':'10px','width':'90%', 'display':'flex','justify-content':'left'}),
                    html.Div([
                        html.Span('3星', className='MovieText',style={'margin':'0px 10px','width':'20%'}),
                        html.Div(className='MovieStar',style={'width':'5.4%','background-color':'#FFD700'}),
                        html.Span('5.4%', className='MovieText',style={'margin':'0px 10px','font-size':'10px'}),
                    ], className='MovieStarDiv',style={'margin-top':'10px','width':'90%', 'display':'flex','justify-content':'left'}),
                    html.Div([
                        html.Span('2星', className='MovieText',style={'margin':'0px 10px','width':'20%'}),
                        html.Div(className='MovieStar',style={'width':'1.2%','background-color':'#FFD700'}),
                        html.Span('1.2%', className='MovieText',style={'margin':'0px 10px','font-size':'10px'}),
                    ], className='MovieStarDiv',style={'margin-top':'10px','width':'90%', 'display':'flex','justify-content':'left'}),
                    html.Div([
                        html.Span('1星', className='MovieText',style={'margin':'0px 10px','width':'20%'}),
                        html.Div(className='MovieStar',style={'width':'1.1%','background-color':'#FFD700'}),
                        html.Span('1.1%', className='MovieText',style={'margin':'0px 10px','font-size':'10px'}),
                    ], className='MovieStarDiv',style={'margin-top':'10px','width':'90%', 'display':'flex','justify-content':'left'}),
                ], className='MovieStarDivs',style={'width':'100%', 'display':'flex','justify-content':'space-around','flex-direction':'column'}),
            ],style={'width':'100%'}),
            ],style={'width':'100%'}),
        ], className='MovieDiv'),
    ], className='Backgroud',style={'margin':'30px'})
    ],style={'margin':'20px'})


